/**
 * Created by Dalyn on 2017/3/30.
 */
import React from 'react';
import { Button, message } from 'antd';
import { Link } from 'react-router';
import '../css/SuggestList.css';
import Relay from "react-relay";
import Util from "../../../../util/Util";
import SuggestListMutation from "../mutation/SuggestListMutation";
import SaveSuggestMutation from "../mutation/SaveSuggestMutation"

import {Modal,Input} from 'fly';

export default class List extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      listData: null,         // list列表数据
      addmodalVisible: false,  // 添加弹框显示隐藏控制
      replymodalVisible: false, //回复弹框显示隐藏控制
      addTextArea: '',      //新增反馈内容
      total : '',          //分页总条数
      pageSize : '5',      //每页显示条数
      pageNum : '1',        //当前页数
      // bannerTextVisible: false,
    }
  }

  componentWillMount() {
    this.getSuggestList()
  }
  //页面加载时请求反馈列表数据
  getSuggestList() {
    Relay.Store.commitUpdate(
        new SuggestListMutation({
           pageSize: this.state.pageSize,
           pageNum: this.state.pageNum,
        }),
        {
            onFailure: () => {
              message.info('请求失败') 
            },
            onSuccess: (response) => {
              let errorCode = response.getSuggestList.getSuggestList.errorCode
              if (errorCode == 0) {
                let suggestList = response.getSuggestList.getSuggestList.suggestList
                let total = response.getSuggestList.getSuggestList.totalResult
                // console.log(suggestList);
                this.setState({
                  listData: suggestList,
                  total: total
                })
              } else {
                message.info('请求失败')
              }
            }
        }
    );
  }

  /*新增反馈框*/
  addModal(addmodalVisible) {
    let this_ = this;
    this.setState({ addmodalVisible });
    let userName = sessionStorage.getItem('username');
    let phone = sessionStorage.getItem('phone')
    if (this.state.addTextArea != '' && this.state.addTextArea.length < 500) {
      Relay.Store.commitUpdate(
          new SaveSuggestMutation({
            userName: userName,
            detail: this.state.addTextArea,
            phone: phone
          }),
          {
              onFailure: () => {
                // console.log("新增反馈请求失败")
              },
              onSuccess: (response) => {
                this.setState({
                  pageNum : '1',
                  addTextArea: ''
                }, () => {
                  this.getSuggestList()
                });
              }
          }
      );
    }
  }

  /*新增反馈框监听*/
  addTextareaChange(e) {

      if(e.target.value.length>5000) {
      let addTextArea = e.target.value.substring(0, 5000);
      this.setState({ addTextArea: addTextArea});
    } else {
      let addTextArea = e.target.value;
      this.setState({ addTextArea: addTextArea})
    }
  }

  /*框关闭*/
  closeModal(modalVisible) {
    this.setState({ addmodalVisible: modalVisible, addTextArea: '' });
  }

  /*页数改变*/
  pageChange(e) {
    let numtest = /^[0-9]*$/;
    let text = e.target.value;
    if (!numtest.test(text)) {
        return
    } else {
      this.setState({ pageNum: text})
    }
  }

  /*总页数*/
  pageTotal() {
      return Math.ceil(this.state.total / this.state.pageSize)
  }
  /*上一页*/
  leftBtn() {
      if (this.state.pageNum <= 1) {
          return;
      } else {
          this.state.pageNum --;
          // this.bluron();
          this.setState({
              pageNum: this.state.pageNum,
          })
          this.getSuggestList()
      }
  }

  /*下一页*/
  rightBtn() {
      let pageTotal = this.pageTotal();
      if (this.state.pageNum >= pageTotal) {
          return;
      } else {
          this.state.pageNum++;
          this.setState({
              pageNum: this.state.pageNum,
          })
          this.getSuggestList()
      }
  }

  /*确定按钮*/
  confirm() {
      let pageTotal = this.pageTotal();
      let pageNum = this.state.pageNum;
      if (pageNum < 1) {
          this.state.pageNum=1;
      } else if (pageNum > pageTotal) {
          this.state.pageNum = pageTotal;
      } else {
          this.state.pageNum = pageNum;
      }
      this.getSuggestList()
  }


  render() {
    return (
      <div className="suggestList">
        <div className="suggest_banner">
          <div>
            <img className="suggest_banner_text" src={require("../../img/banner_text.png")} alt="" />
            <Button onClick={() => this.addModal(true)} type="primary" style={{background: '#36b3b3',border: 'none', color: '#fff'}} icon="plus">意见反馈</Button>
          </div>
        </div>
        <div className='suggest_list'>
          <p className="suggest_line"></p>
          <div className="suggest_list_dl">
          {
            this.state.listData ?
            this.state.listData.map((v, i, ele)=> {
                return (
                  <div key={i+''}>
                    <Link to = {{pathname:"SuggestDetail", query:{suggestId: v.sid}}}>
                      <dl>
                        <dt>
                          <img src="./img/user_ico2.png" alt="" />
                          <span>{v.userName}</span>
                        </dt>
                        <dd>
                          <p className="suggest_details">{v.detail}</p>
                          <p className="suggest_time">
                            <span>{Util.dateFormat_hms(v.updateDate)}</span>
                              {
                                v.ifShow == '1' ? <a style={{float:'right',color: 'rgb(252, 72, 72)'}}>未读</a> : null
                              }
                          </p>
                        </dd>
                      </dl>
                    </Link>
                  </div>
                )
            }) : null
          }
          </div>
            {/*分页*/}
            <div className="suggest_pagination">
                <span>总计{this.state.total}条</span>
                <span>共{this.pageTotal()}页</span>
                <span>第 <input style={{width: 20,border: '1px solid #ccc', borderRadius: '3px', textAlign: 'center'}}  value = {this.state.pageNum} onChange = {this.pageChange.bind(this)}  /> 页</span>
                <button className="suggest_confirmBtn" onClick={this.confirm.bind(this)}>确定</button>
                <span className="suggest_prev_next_btn">
            <b className="suggest_prev" onClick={this.leftBtn.bind(this)}></b>
            <b className="suggest_next" onClick={this.rightBtn.bind(this)}></b>
          </span>
            </div>
        </div>

        {/*新建反馈弹框*/}
        <Modal
          title="新建反馈"
          okText='确定'
          style={{ top : '20%' }}
          visible={this.state.addmodalVisible}
          onOk={()=>this.addModal(false)}
          onCancel={()=>this.closeModal(false)}
        >
          <p style={{display: 'flex'}}><span style={{lineHeight: '24px',fontSize: '14px'}}>意见描述：</span>
              <Input type="textarea" style={{width:400}}
                     value={this.state.addTextArea}
                     onChange={this.addTextareaChange.bind(this)}
                     rows="8"
              />
          </p>
        </Modal>
      </div>
    )
  }
}
